import React from './react';
import ReactDOM from './react-dom';
// import ReactDOM from 'react-dom';

// const ele = <div>
//   <h1>Hello World</h1>
//   <p>This is a React app</p>
// </div>
// ReactDOM.render(ele, document.getElementById('root'));

// const ele = (
//   <div className="active" title="123" style={{width: 20,color: "#f00"}} onClick={()=> {
//     console.log("onClick")
//   }}>
//     hello,<span>react</span>
//   </div>
// )
// const Home = function () {
//   return (
//     <div className="active" title="123" style={{ width: 20, color: "#f00" }} onClick={() => {
//       console.log("onClick")
//     }}>
//       hello,<span>react</span>
//     </div>
//   )
// }
class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 0
    }
  }
  handleClick() {
    this.setState({
      num: this.state.num + 1
    })
  }
  componentWillMount () {
    console.log('ComponentWillMount :>> ');
  }
  componentDidMount () {
    console.log('ComponentDidMount :>> ');
  
  }
  componentWillUpdate (nextProps, nextState) {
    console.log('ComponentWillUpdate :>> ');
  }
  componentDidUpdate (nextProps, nextState) {
    console.log('componentDidUpdate :>> ');

  }
  render() {
    return (
      <div className="active" title="123" style={{ width: 20, color: "#f00" }} >
        <div>name: {this.props.name}</div>
        hello,<span>react</span>
        num: {this.state.num}
        <button onClick={this.handleClick.bind(this)}>按钮</button>
      </div>
    )
  }
}
// ReactDOM.render(<Home name={2222}/>, document.getElementById('root'));
ReactDOM.render(<div class="root111" title="234">123</div>, document.getElementById('root'));